<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>首页</title>
    <link rel="stylesheet" href="libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style/common.css">
    <script src="libs/vue.js"></script>
    <script src="libs/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="libs/layer-v3.1.1/layer/layer.js"></script>
    <!--<script src="js/system.js"></script>-->
</head>
<body>
<div id="app">


<header-component :url="url"></header-component>
<nav-component></nav-component>

<div class="carousel-box">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li v-for="(l,item) in carousel" :key="item" data-target="#carouselExampleIndicators" :data-slide-to="item" :class="{'':item!=0 ,'active':item==0}"></li>
        </ol>
        <div class="carousel-inner">
            <div v-for="(l,item) in carousel" :key="item" :class="{'carousel-item':item!=0 ,'carousel-item active':item==0}" >
                <a :href="l.url" target="view_window">
                    <img class="d-block w-100" :src="url+l.image" alt="First slide">
                </a>

            </div>

        </div>

    </div>
    <div class="box-inner">
        <div class="large-more">基层管理和便民服务平台</div>
        <div class="large">社区、小区、院落、村、社、组、基层网站查询</div>
        <div class="search-box">
            <div class="search-input">
                <img src="static/icons/搜索(1).png" alt="">
                <input type="text" placeholder="请输入基层网站名称、如：xx社区/小区/院落/村/组">
            </div>
            <div class="search-btn">搜索站点</div>
            <div class="search-btn">搜索文章</div>
        </div>
        <div class="link-row">我关注的：四川成都高新区红树湾二期 <a href="">(点击进入)</a></div>
    </div>


</div>

<main>
    <div class="content">
        <div class="Administrative">
            <div class="admin-header">
                <div class="admin-name">按行政区划查找站点</div>
                <div class="admin-tips">查找不到的站点请注册自助建站，或联系总部服务</div>
            </div>
            <div class="admin-box">
                <a href="" data-toggle="modal" data-target="#myModal2">北京</a>
                <a href="">北京</a>
            </div>
        </div>

        <div class="adv-row">
            <a :href="a.url" target="view_window" v-for="(a,index) in adv1" :key="index">
                <img :src="url+a.image" alt="">
            </a>


        </div>
        <div class="Exhibition-container">
            <div class="Exhibition-l">
                <classify-component :url="url"></classify-component>
                <div class="experience-box">
                    <div class="experience-title">
                        <div class="experience-title-text">家园见闻</div>
                    </div>
                    <div class="experience-container">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="hotspot-tab" data-toggle="tab" href="#hotspot" role="tab" aria-controls="hotspot" aria-selected="true">热点
                                    <!--<img class="tip" src="static/icons/多边形686.png" alt="">-->
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="video-tab" data-toggle="tab" href="#video" role="tab" aria-controls="video" aria-selected="false">视频</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="trifles-tab" data-toggle="tab" href="#trifles" role="tab" aria-controls="trifles" aria-selected="false">琐事</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="foods-tab" data-toggle="tab" href="#foods" role="tab" aria-controls="foods" aria-selected="false">美食</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="health-tab" data-toggle="tab" href="#health" role="tab" aria-controls="health" aria-selected="true">养生</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="education-tab" data-toggle="tab" href="#education" role="tab" aria-controls="education" aria-selected="false">教育</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="arder-tab" data-toggle="tab" href="#arder" role="tab" aria-controls="arder" aria-selected="false">休闲</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="town-tab" data-toggle="tab" href="#town" role="tab" aria-controls="town" aria-selected="false">城乡</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="life-tab" data-toggle="tab" href="#life" role="tab" aria-controls="life" aria-selected="true">生活</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="talk-tab" data-toggle="tab" href="#talk" role="tab" aria-controls="talk" aria-selected="false">杂谈</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="statement-tab" data-toggle="tab" href="#statement" role="tab" aria-controls="statement" aria-selected="false">说法</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="propagate-tab" data-toggle="tab" href="#propagate" role="tab" aria-controls="propagate" aria-selected="false">弘扬</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="hotspot" role="tabpanel" aria-labelledby="hotspot-tab">
                                <div class="experience-list">
                                    <div class="experience-list-title">张家口堡子里国家重点文物保护古建筑小区</div>
                                    <div class="experience-list-content">
                                        <img src="static/images/图1.png" alt="">
                                        <img src="static/images/图1.png" alt="">
                                        <img src="static/images/图1.png" alt="">
                                    </div>
                                </div>
                                <div class="experience-list">
                                    <div class="experience-list-title">张家口堡子里国家重点文物保护古建筑小区</div>
                                    <div class="experience-list-content">
                                        <img src="static/images/图1.png" alt="">
                                        <img src="static/images/图1.png" alt="">
                                        <img src="static/images/图1.png" alt="">
                                    </div>
                                </div>
                                <div class="experience-list">
                                    <div class="experience-list-title">张家口堡子里国家重点文物保护古建筑小区</div>
                                    <div class="experience-list-content">
                                        <img src="static/images/图1.png" alt="">
                                        <img src="static/images/图1.png" alt="">
                                        <img src="static/images/图1.png" alt="">
                                    </div>
                                </div>
                                <div class="experience-list">
                                    <div class="experience-list-title">张家口堡子里国家重点文物保护古建筑小区</div>
                                    <div class="experience-list-content">
                                        <img src="static/images/图1.png" alt="">
                                        <img src="static/images/图1.png" alt="">
                                        <img src="static/images/图1.png" alt="">
                                    </div>
                                </div>
                                <div class="experience-list">
                                    <div class="experience-list-title">张家口堡子里国家重点文物保护古建筑小区</div>
                                    <div class="experience-list-content">
                                        <img src="static/images/图1.png" alt="">
                                        <img src="static/images/图1.png" alt="">
                                        <img src="static/images/图1.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="video" role="tabpanel" aria-labelledby="video-tab">video</div>
                            <div class="tab-pane fade" id="trifles" role="tabpanel" aria-labelledby="trifles-tab">trifles</div>
                            <div class="tab-pane fade" id="foods" role="tabpanel" aria-labelledby="foods-tab">foods</div>
                            <div class="tab-pane fade" id="health" role="tabpanel" aria-labelledby="health-tab">health</div>
                            <div class="tab-pane fade" id="education" role="tabpanel" aria-labelledby="education-tab">education</div>
                            <div class="tab-pane fade" id="arder" role="tabpanel" aria-labelledby="arder-tab">arder</div>
                            <div class="tab-pane fade" id="town" role="tabpanel" aria-labelledby="town-tab">town</div>
                            <div class="tab-pane fade" id="life" role="tabpanel" aria-labelledby="life-tab">life</div>
                            <div class="tab-pane fade" id="talk" role="tabpanel" aria-labelledby="talk-tab">talk</div>
                            <div class="tab-pane fade" id="statement" role="tabpanel" aria-labelledby="statement-tab">statement</div>
                            <div class="tab-pane fade" id="propagate" role="tabpanel" aria-labelledby="propagate-tab">propagate</div>
                        </div>
                    </div>
                </div>
                <div class="governed-law-box">
                    <div class="governed-law-header">
                        <div class="governed-law-header-title">法制道德</div>
                        <div class="governed-law-header-nav">
                            <ul class="nav nav-tabs" id="myTab2" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="legality-tab" data-toggle="tab" href="#legality" role="tab" aria-controls="legality" aria-selected="true">法制正气</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="exposure-tab" data-toggle="tab" href="#exposure" role="tab" aria-controls="exposure" aria-selected="false">负面曝光</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="civilization-tab" data-toggle="tab" href="#civilization" role="tab" aria-controls="civilization" aria-selected="false">素质文明</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="truth-tab" data-toggle="tab" href="#truth" role="tab" aria-controls="truth" aria-selected="false">真相</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="report-tab" data-toggle="tab" href="#report" role="tab" aria-controls="report" aria-selected="true">举报</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="governed-law-list">
                        <div class="governed-law-list-img" style="background: url(static/images/楼.png)center center no-repeat;background-size: contain"></div>
                        <div class="governed-law-list-content">
                            <div class="list-title">我国古代溜达鬼才：诸葛亮没能上榜，姜子牙点滴，第一据说还火照......</div>
                            <div class="list-text">
                                主要是物业管理企业没有建立装修管理流程和建立后没有执行；还有一些业主在装修前没有到物业公司进行
                                申请，就自行开始装修，随意倒装修和建筑垃圾；有一些业主拒绝清理，物业公司没办法自行清理。一个30
                                万平方米的住宅小区。
                            </div>
                            <div class="list-btn">
                                <span>发表于 成都社区服务分站</span>
                                <span><img src="static/icons/评论1.png" alt="">208</span>
                                <span><img src="static/icons/时间1.png" alt="">16:30</span>
                            </div>
                        </div>
                    </div>
                    <div class="governed-law-list">
                        <div class="governed-law-list-img" style="background: url(static/images/楼.png)center center no-repeat;background-size: contain"></div>
                        <div class="governed-law-list-content">
                            <div class="list-title">我国古代溜达鬼才：诸葛亮没能上榜，姜子牙点滴，第一据说还火照......</div>
                            <div class="list-text">
                                主要是物业管理企业没有建立装修管理流程和建立后没有执行；还有一些业主在装修前没有到物业公司进行
                                申请，就自行开始装修，随意倒装修和建筑垃圾；有一些业主拒绝清理，物业公司没办法自行清理。一个30
                                万平方米的住宅小区。
                            </div>
                            <div class="list-btn">
                                <span>发表于 成都社区服务分站</span>
                                <span><img src="static/icons/评论1.png" alt="">208</span>
                                <span><img src="static/icons/时间1.png" alt="">16:30</span>
                            </div>
                        </div>
                    </div>
                    <div class="governed-law-list">
                        <div class="governed-law-list-img" style="background: url(static/images/楼.png)center center no-repeat;background-size: contain"></div>
                        <div class="governed-law-list-content">
                            <div class="list-title">我国古代溜达鬼才：诸葛亮没能上榜，姜子牙点滴，第一据说还火照......</div>
                            <div class="list-text">
                                主要是物业管理企业没有建立装修管理流程和建立后没有执行；还有一些业主在装修前没有到物业公司进行
                                申请，就自行开始装修，随意倒装修和建筑垃圾；有一些业主拒绝清理，物业公司没办法自行清理。一个30
                                万平方米的住宅小区。
                            </div>
                            <div class="list-btn">
                                <span>发表于 成都社区服务分站</span>
                                <span><img src="static/icons/评论1.png" alt="">208</span>
                                <span><img src="static/icons/时间1.png" alt="">16:30</span>
                            </div>
                        </div>
                    </div>
                    <div class="governed-law-list">
                        <div class="governed-law-list-img" style="background: url(static/images/楼.png)center center no-repeat;background-size: contain"></div>
                        <div class="governed-law-list-content">
                            <div class="list-title">我国古代溜达鬼才：诸葛亮没能上榜，姜子牙点滴，第一据说还火照......</div>
                            <div class="list-text">
                                主要是物业管理企业没有建立装修管理流程和建立后没有执行；还有一些业主在装修前没有到物业公司进行
                                申请，就自行开始装修，随意倒装修和建筑垃圾；有一些业主拒绝清理，物业公司没办法自行清理。一个30
                                万平方米的住宅小区。
                            </div>
                            <div class="list-btn">
                                <span>发表于 成都社区服务分站</span>
                                <span><img src="static/icons/评论1.png" alt="">208</span>
                                <span><img src="static/icons/时间1.png" alt="">16:30</span>
                            </div>
                        </div>
                    </div>
                    <div class="governed-law-list">
                        <div class="governed-law-list-img" style="background: url(static/images/楼.png)center center no-repeat;background-size: contain"></div>
                        <div class="governed-law-list-content">
                            <div class="list-title">我国古代溜达鬼才：诸葛亮没能上榜，姜子牙点滴，第一据说还火照......</div>
                            <div class="list-text">
                                主要是物业管理企业没有建立装修管理流程和建立后没有执行；还有一些业主在装修前没有到物业公司进行
                                申请，就自行开始装修，随意倒装修和建筑垃圾；有一些业主拒绝清理，物业公司没办法自行清理。一个30
                                万平方米的住宅小区。
                            </div>
                            <div class="list-btn">
                                <span>发表于 成都社区服务分站</span>
                                <span><img src="static/icons/评论1.png" alt="">208</span>
                                <span><img src="static/icons/时间1.png" alt="">16:30</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="report">
                    <div class="complaint">
                        <div class="complaint-item">投诉</div>
                        <div class="complaint-item">投诉</div>
                        <div class="complaint-item">投诉</div>
                    </div>
                </div>
            </div>
            <div class="Exhibition-r">
                <notice-component></notice-component>
                <div class="investigation">
                    <div class="investigation-tab">
                        <div class="tab-item">
                            <div class="tab-item-header"><img src="static/icons/问题.png" alt="">卜咚问问</div>
                            <div class="tab-item-text">
                                实时为您解答，卜咚
                                问问您身边的社区管家
                            </div>
                        </div>
                        <div class="tab-item">
                            <div class="tab-item-header"><img src="static/icons/互动.png" alt="">城乡互动</div>
                            <div class="tab-item-text">
                                民主，公平，公开，
                                透明化选举信息
                            </div>
                        </div>
                        <div class="tab-item">
                            <div class="tab-item-header"><img src="static/icons/调查.png" alt="">家园调查</div>
                            <div class="tab-item-text">
                                实时为您解答，卜咚
                                问问您身边的社区管家
                            </div>
                        </div>
                        <div class="tab-item">
                            <div class="tab-item-header"><img src="static/icons/投诉.png" alt="">投诉建议</div>
                            <div class="tab-item-text">
                                有您的参与，平台将
                                更加完善谢谢您的留言
                            </div>
                        </div>
                    </div>
                    <div class="investigation-list">
                        <div class="investigation-list-title">
                            <span>家</span>
                            <span>园</span>
                            <span>调</span>
                            <span>查</span>
                        </div>
                        <div class="investigation-comment">
                            <div class="investigation-comment-item">
                                <div class="investigation-comment-item-title">【焦点】</div>
                                <a class="investigation-comment-item-link" href="#">社区干部评议</a>
                            </div>
                            <div class="investigation-comment-item">
                                <div class="investigation-comment-item-title">【投票】</div>
                                <a class="investigation-comment-item-link" href="#">社区干部评议</a>
                            </div>
                            <div class="investigation-comment-item">
                                <div class="investigation-comment-item-title">【评议】</div>
                                <a class="investigation-comment-item-link" href="#">社区干部评议</a>
                            </div>
                            <div class="investigation-comment-item">
                                <div class="investigation-comment-item-title">【征集】</div>
                                <a class="investigation-comment-item-link" href="#">社区干部评议</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="news">
                    <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="static/images/两会.png" alt="First slide">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5>中国进入“两会时间”国际舆论聚焦时期</h5>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="static/images/政府.png" alt="First slide">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5>中国进入“两会时间”国际舆论聚1</h5>
                                </div>
                            </div>

                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div class="news-item">
                        <ul>
                            <li onclick="javascript:window.location.href='views/home/article-list.html'"><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                            <li><span></span> “每餐应有学校负责人与学生共同用餐”|附番禺区A</li>
                        </ul>
                    </div>
                </div>
                <div class="help">
                    <div class="experience-title">
                        <div class="experience-title-text">公益帮助</div>
                    </div>
                    <div class="experience-container">
                        <ul class="nav nav-tabs" id="myTab3" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="public-tab" data-toggle="tab" href="#public" role="tab" aria-controls="public" aria-selected="true">公共公益
                                    <!--<img class="tip" src="static/icons/多边形686.png" alt="">-->
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="charitable-tab" data-toggle="tab" href="#charitable" role="tab" aria-controls="charitable" aria-selected="false">慈善帮助</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="Poverty-alleviation-tab" data-toggle="tab" href="#Poverty-alleviation" role="tab" aria-controls="Poverty-alleviation" aria-selected="false">联合扶贫</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="fond-tab" data-toggle="tab" href="#fond" role="tab" aria-controls="fond" aria-selected="false">寻人寻物</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent3">

                            <div class="tab-pane fade show active" id="public" role="tabpanel" aria-labelledby="public-tab">
                                <div class="help-list">
                                    <div class="help-list-img">
                                        <img src="static/images/房子Loi.png" alt="">
                                    </div>
                                    <div class="help-list-text">
                                        为了更好的让大家使用家园服务网
                                        的平台网站，经过公司的研发，小
                                        程序已经开发并投入使用。
                                    </div>
                                </div>
                                <div class="item-list">

                                    为了更好的让大家使用家园服务网的平台网站，经过
                                    公司的研发，小程序已经开发并投入使用。

                                </div>
                                <div class="item-list">

                                    为了更好的让大家使用家园服务网的平台网站，经过
                                    公司的研发，小程序已经开发并投入使用。

                                </div>
                                <div class="item-list">

                                    为了更好的让大家使用家园服务网的平台网站，经过
                                    公司的研发，小程序已经开发并投入使用。

                                </div>
                                <div class="item-list">

                                    为了更好的让大家使用家园服务网的平台网站，经过
                                    公司的研发，小程序已经开发并投入使用。

                                </div>
                            </div>
                            <div class="tab-pane fade" id="charitable" role="tabpanel" aria-labelledby="charitable-tab">trifles</div>
                            <div class="tab-pane fade" id="Poverty-alleviation" role="tabpanel" aria-labelledby="Poverty-alleviation-tab">foods</div>
                            <div class="tab-pane fade" id="fond" role="tabpanel" aria-labelledby="fond-tab">fond</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="adv-row">
            <a :href="a.url" target="view_window" v-for="(a,index) in adv2" :key="index">
                <img :src="url+a.image" alt="" style="height: 5.75rem">
            </a>
        </div>
        <div class="adv-row">
            <a :href="a.url" target="view_window" v-for="(a,index) in adv3" :key="index">
                <img :src="url+a.image" alt="" style="width: 100%">
            </a>
        </div>
        <friend-component :url="url"></friend-component>
    </div>
</main>
    <footer-component></footer-component>
    <suspension-component></suspension-component>

    <modal-component></modal-component>
</div>

<script src="jsc/common.js"></script>
<script src="jsc/component.js"></script>
<script>
//    (function () {
//        $("header").load("views/common/header.html");
//        $("nav").load("views/common/nav.html");
//        $(".friend-link").load("views/common/friend-link.html");
//
//
//    })()
    $(window).resize(function() {
        var width_window = $(window).width();
        var width_div = $(".content").width();
        var left = (width_window-width_div)/2+width_div+30;
        $(".suspension").css({
            "left":left
        })
    });
    //获取窗口可视范围的高度
    function getClientHeight(){
        var clientHeight=0;
        if(document.body.clientHeight&&document.documentElement.clientHeight){
            var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
        }else{
            var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
        }
        return clientHeight;
    }
    function getScrollTop(){
        var scrollTop=0;
        if(document.documentElement&&document.documentElement.scrollTop){
            scrollTop=document.documentElement.scrollTop;
        }else if(document.body){
            scrollTop=document.body.scrollTop;
        }
        return scrollTop;
    }
    function getScrollHeight(){
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    }

    $(window).scroll(function () {
        var height=getClientHeight(),
            // 窗口滚动条高度
            theight=getScrollTop(),
            // 窗口可视范围的高度
            rheight=getScrollHeight(),
            // 滚动条距离底部的高度
            bheight=rheight-theight-height;
        if(document.documentElement.scrollTop>=200&&bheight>400){
            $(".suspension").show();
        }else{
            $(".suspension").hide();
        }
    })

    var userAgent = navigator.userAgent.toLowerCase();
    var platform;
    if(userAgent == null || userAgent == ''){
        platform = 'WEB' ;
    }
    else{
        if(userAgent.indexOf("android") != -1 ){
            platform = 'ANDROID';
            location.href = "views/wap/index.html";
        }else if(userAgent.indexOf("ios") != -1 || userAgent.indexOf("iphone") != -1 || userAgent.indexOf("ipad") != -1){
            platform = 'IOS';
            location.href = "views/wap/index.html";
        }else if(userAgent.indexOf("windows phone") != -1 ){
            platform = 'WP';
            location.href = "views/wap/index.html";
        }else{
            platform = 'WEB' ;
//            location.href = "#";
        }
    }

new Vue({
    el:"#app",
    data:{

        detail:{},
        carousel:[],
        url:'http://192.168.0.168',
        adv1:[],
        adv2:[],
        adv3:[],


    },
    mounted(){
        var _th = this;
        this.getDetail()


    },
    filters:{

    },
    methods:{
        loginOut:function () {
            //退出登录
            layer.confirm("确定退出登录？",{ btn:["确定","取消"]},function () {
                delCookie("token");
                window.location.href = "login.html"
            },function (index) {
                layer.close(index);
            })
        },

        getDetail:function () {

            axios.post(sysurl + 'index/bannerAds', {category_id:14})
                .then(res => {
                    if (res.data.code === 1) {
                        this.carousel = res.data.data
                    }
                    else {
                        layer.msg(res.data.msg);
                    }
                }, err => {

                })
                .catch((error) => {

                })
            axios.post(sysurl + 'index/bannerAds', {category_id:15})
                .then(res => {
                    if (res.data.code === 1) {
                        this.adv1 = res.data.data
                    }
                    else {
                        layer.msg(res.data.msg);
                    }
                }, err => {

                })
                .catch((error) => {

                })
            axios.post(sysurl + 'index/bannerAds', {category_id:41})
                .then(res => {
                    if (res.data.code === 1) {
                        this.adv2 = res.data.data
                    }
                    else {
                        layer.msg(res.data.msg);
                    }
                }, err => {

                })
                .catch((error) => {

                })
            axios.post(sysurl + 'index/bannerAds', {category_id:42})
                .then(res => {
                    if (res.data.code === 1) {
                        this.adv3 = res.data.data
                    }
                    else {
                        layer.msg(res.data.msg);
                    }
                }, err => {

                })
                .catch((error) => {

                })
        },


    }
})
</script>
</body>
</html>